<template>
    <div>
        <Modal v-model="modal" class="modal-center" title="导出为节点" width=400>
            <div v-if="modalShow" class="form-input">
                <Row class="form-field">
                    <Col class="field-label" span="4">
                    <label>名称</label>
                    </Col>
                    <Col class="field-input" span="20">
                    <Input v-model="data.name"></Input>
                    </Col>
                </Row>
                <Row class="form-field">
                    <Col class="field-label" span="4">
                    <label>菜单</label>
                    </Col>
                    <Col class="field-input" span="20">
                    <Selector v-model="data.folder_id" :data="folderList"></Selector>
                    </Col>
                </Row>
            </div>
            <div slot="footer" class="button-panel-button">
                <i-button @click="close">取消</i-button>
                <i-button @click="actionSubmit" type="primary">确认</i-button>
            </div>
        </Modal>
    </div>
</template>

<script>
import ModalBase from '../modalBase'
import Selector from '@/element/select'
import $ from '@/common'
export default {
    extends: ModalBase,
    props: {},
    data() {
        return {
            path: {
            },
            folderList: [],
            folderMap: {},
            data: {
                folder_id: null,
                name: null
            }
        }
    },
    computed: {},
    methods: {
        load() {
            this.folderList = []
            $.nodeData.forEach((node) => {
                if (!node.folder_id || !node.folder_id.length) {
                    this.folderList.push({
                        id: node.id,
                        code: node.code,
                        name: node.name
                    })
                    this.folderMap[node.id] = node
                }
            })
        },
        submitPath() {
            return `${this.actionModel.path}/${this.actionData.id}`
        },
        submitData() {
            return {
                ...this.data,
                folder_code: this.folderMap[this.data.folder_id].code
            }
        },
        actionAfter() {
            this.$store.dispatch('fetchNodes')
        }
    },
    components: {
        Selector
    }
}
</script>

<style lang="less">
.form-input {
    .form-field {
        padding: 8px;
    }
}
</style>
